<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	<script src="../layui/layui.js"></script>
	<script type="text/javascript">

		//layui基本用法先声明组件，后使用
		layui.use([ 'layer', 'form', 'jquery', 'table' ], function() {
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.jquery;
			var table = layui.table;
			table.render({
				elem : '#dg',
				url : '../buyer/listPage',
				page : true,
				id : 'dataTable',
				cols : [ [ //表头
				{
					field : 'bid',
					title : 'ID',
					checkbox : true
				}, {
					field : 'bname',
					title : '买家名称',
				},{
					field : 'sex',
					title : '性别',
				}, {
					field : 'age',
					title : '年龄',
				}, {
					field : 'tel',
					title : '电话',
				}, {
					field : 'tel',
					title : '电话',
				}, {
					field : 'email',
					title : '邮箱',
				}, {
					field : 'address',
					title : '地址',
				}, {
					field : 'bname',
					title : '操作',
					width : 100,
					toolbar : '#barDemo',
				}] ]
			});

	/*  	   parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				for ( var index in res.data) {
					var buyer = res.data[index];
				}  

				return {
					 "code" : res.code, //解析接口状态 
					"code": 0, //解析接口状态
					"msg" : "", //解析提示文本
					"count" : 1000, //解析数据长度
					"data" : res.data
				//解析数据列表
				};
			} 
		});  */

		//监听表格行工具栏
		table.on('tool(test)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				//填充表单,填充数据
				form.render();
			//	fillSelect('/buyer/listPage',data.buyer.bid);
				//修改对话框
				layer.open({
					title : '修改',
					content : $('#edit-dialog').html(),
					type : 1,
				});

				form.val('edit-dialog-form', {
					'bid' : data.bid,
					'bname' : data.bname,
					'sex' : data.sex,
					'age':data.age,
					'tel':data.tel,
					'email':data.email,
					'address':data.address
					
				})
			}
		
				//手动给选择框赋值
				//$("#category-select-edit").find("option[value='"+data.category.cid+"']").attr("selected",true);
				
				//提交表单修改，关闭添加对话框
				form.on('submit(save-submit)', function(data) {
					
					$.post('../buyer/update',
							data.field, function(flag) {
								if (flag) {
									 table.reload('dataTable', {});//刷新表格 
									layer.msg('修改成功');
									layer.closeAll('page');//关闭当前弹出对话框
								} else {
									layer.msg('修改失败');
								}
							})

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			
		});


		  //添加按钮
			$('#add-btn').click(
					function() {
						//弹出对话框
						layer.open({
							content : $('#add-dialog').html(),
							title : '添加买家',
							type : 1
						});
						form.render();
						//提交表单，关闭添加对话框
						form.on('submit(save-submit)', function(data) {
							//console.log(data.field)//当前容器的全部表单字段，名值对形式:{name,value}
							$.post('../buyer/insert', data.field,
									function(flag) {
										if (flag) {
											layer.msg('添加成功');
										} else {
											layer.msg('添加失败');
										}

									})
						})
						return false;//阻止表单跳转。如果需要跳转，去掉本段
					});
			 
					
					//查询按钮
			$('#search-btn').click(function() {
				//执行重载
				table.reload('dataTable', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						bname : $('#bname').val()
					}
				});
			});
			//删除按钮
			$("#remove-btn").click(
					function() {
						var checkStatus = table.checkStatus('dataTable');
						var bids = [];
						for ( let i in checkStatus.data) {
							bids.push(checkStatus.data[i].bid);
							
						}
						
						$.post('../buyer/delete', {'bids':bids},
								function(flag) {
									if (flag) {
										table.reload('dataTable', {});
										layer.msg("删除成功");
									} else {
										layer.msg("删除失败");
									}
								});
					});
			})
		
</script>
	
<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i> 
			编辑
		</a>
	</script>


	<div class="demoTable">
		搜索买家名
		<div class="layui-inline">
			<input class="layui-input" name="bname" id="bname" autocomplete="off">
		</div>
		<button id="search-btn" class="layui-btn">
			<i class="layui-icon layui-icon-search"></i> 查询
		</button>
		<button id="add-btn" class="layui-btn layui-btn-warm">
			<i class="layui-icon layui-icon-addition"></i> 添加
		</button>
		<button id="remove-btn" class="layui-btn layui-btn-danger">
			<i class="layui-icon layui-icon-delete"></i> 删除
		</button>

	</div>


<!-- <div class="layui-form-item">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-inline">
		<input type="text" name="sex" required lay-verify="required"
					placeholder="性别" class="layui-input">
		</div>
		</div> -->

	<table id="dg" lay-filter="test"></table>
	
	<script type="text/html" id="add-dialog">
		<form class="layui-form" method="post">
		<div class="layui-form-item">
		<label class="layui-form-label">买家名称</label>
		<div class="layui-input-inline">
		<input type="text" name="bname" required lay-verify="required"
					placeholder="请输入买家名称" class="layui-input">
		</div>
		</div>

        <div class="layui-form-item">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-block">
		<select name="sex" lay-verify="">
        <option value="">请选择</option>
        <option value="男">男</option>
		<option value="女">女</option>
		</select>  
		</div>   
		</div>

		<div class="layui-form-item">
		<label class="layui-form-label">年龄</label>
		<div class="layui-input-inline">
		<input type="text" name="age" required lay-verify="required"
					placeholder="年龄" class="layui-input">
		</div>
		</div>

 		<div class="layui-form-item">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
		<input type="text" name="tel" required lay-verify="required"
					placeholder="电话" class="layui-input">
		</div>
		</div>

		<div class="layui-form-item">
		<label class="layui-form-label">邮箱</label>
		<div class="layui-input-inline">
		<input type="text" name="email" required lay-verify="required"
					placeholder="邮箱" class="layui-input">
		</div>
		</div>

        <div class="layui-form-item">
		<label class="layui-form-label">地址</label>
		<div class="layui-input-inline">
		<input type="text" name="address" required lay-verify="required"
					placeholder="地址" class="layui-input">
		</div>
		</div>
		
		<div class="layui-form-item">
		<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="save-submit">保存</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
		</div>
		</form>
	</script>

	<script type="text/html" id="edit-dialog">
		<form class="layui-form" method="post"  lay-filter="edit-dialog-form">
<input type="hidden" name="bid"  lay-verify="required"
					 class="layui-input">
		<div class="layui-form-item">
		<label class="layui-form-label">买家名称</label>
		<div class="layui-input-inline">
		<input type="text" name="bname" required lay-verify="required"
					placeholder="请输入买家名称" class="layui-input">
		</div>
		</div>

		<div class="layui-form-item">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-block">
		<select name="sex" lay-verify="">
        <option value="">请选择</option>
        <option value="男">男</option>
		<option value="女">女</option>
		</select>  
		</div>   
		</div>

		<div class="layui-form-item">
		<label class="layui-form-label">年龄</label>
		<div class="layui-input-inline">
		<input type="text" name="age" required lay-verify="required"
					placeholder="年龄" class="layui-input">
		</div>
		</div>

 		<div class="layui-form-item">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
		<input type="text" name="tel" required lay-verify="required"
					placeholder="电话" class="layui-input">
		</div>
		</div>

		<div class="layui-form-item">
		<label class="layui-form-label">邮箱</label>
		<div class="layui-input-inline">
		<input type="text" name="email" required lay-verify="required"
					placeholder="邮箱" class="layui-input">
		</div>
		</div>

        <div class="layui-form-item">
		<label class="layui-form-label">地址</label>
		<div class="layui-input-inline">
		<input type="text" name="address" required lay-verify="required"
					placeholder="地址" class="layui-input">
		</div>
		</div>
		
		<div class="layui-form-item">
		<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="save-submit">保存</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
		</div>
		</form>
	</script>

</body>
</html>